@import '../../../../src/styles/mixins/typography';

.x4-efficiency {
  &__table-wrapper {
    overflow-x: auto;
    margin-top: 1rem;
  }

  &__controls {
    display: flex;
    flex-wrap: wrap;

    > div {
      flex: 0 0 250px;
      margin: 0 2rem 1rem 0;

      .input-control--inline-label {
        margin-bottom: 0.2rem;
        height: 27px;

        .input-control__text {
          width: 135px;
        }
      }

      .input-control {
        .select {
          margin-bottom: 0.2rem;
        }
      }

      > p {
        margin-bottom: 0.2rem;
      }

      .text--xs {
        margin-top: 0.4rem;
      }

      &:last-of-type {
        flex: 0 0 100%;
        margin: 0;
      }
    }
  }

  &__ship-size {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: 27px;
    align-items: flex-end;
    margin-bottom: 0.2rem;

    .input-control {
      margin-bottom: 0.2rem;
    }
  }

  &__value {
    &--worse {
      color: #FF4040 !important;
    }
    &--better {
      color: #4BB543 !important;
    }
  }

  &__race, &__engine, h2 {
    border-left: 6px solid black;
    padding: 0 4px;
  }

  table {
    width: 900px;

    th {
      position: sticky;
      top: 0;
    }
  }

  tr {
    th {
      cursor: pointer;
    }

    td {
      width: 100px;
      cursor: pointer;

      > * {
        margin: 0;
      }

      &:nth-of-type(2) {
        width: 220px;
      }

      &:first-of-type {
        width: 50px;
        padding-right: 1rem;
      }

      &:last-of-type {
        width: 130px;
      }
    }

    .m {
      margin: 0.2rem 0 !important;
    }
  }
}
